<!--
 * @Author: your name
 * @Date: 2021-11-04 14:56:11
 * @LastEditTime: 2022-01-18 11:33:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \star-cat-h5\src\views\artist\add\components\SelectPersonnel.vue
-->
<template>
  <div class="select_personnel">
    <van-sticky>
     <div class="top_serch">
        <div class="fanhui_box" @click="()=>{$router.go(-1)}">
          <img :src="require('@/assets/ic_fanhui.png')">
          <span>返回</span>
        </div>
      <van-search
        v-model="form.name"
        shape="round"
        background="#ffffff"
        placeholder="请输入关键词"
        class="search_box"
        @input="input"
      >
      </van-search>
     </div>
    </van-sticky>
    <div class="content_box">
      <Empty v-if="emptyShow" />
      <van-list v-else v-model="loading" :finished="finished" @load="getList">
        <div
          class="list_item"
          v-for="(item, index) in list"
          :key="index"
          @click="confirm(item)"
        >
          <div class="item_box">
            <div class="artist_info">
              <van-image
                width="44"
                height="44"
                radius="4"
                class="img"
                :src="require('@/assets/defult_icon.jpg')"
              />
                <!-- src="https://img01.yzcdn.cn/vant/cat.jpeg" -->
                <!-- src="https://web-img-2021-11-11.oss-cn-chengdu.aliyuncs.com/fj.jpg?Expires=1636615039&OSSAccessKeyId=TMP.3KfqHZGFEt6GiRTnXjmLV3K3gjbF3XBwPHorcTuCB82reALUedHkSfE7YDFp5kBpkx8GndnzyNKe47HPPXdC37SLX8BrFy&Signature=ekRYsTqW8U3vVtpgav0KaP2PEpI%3D" -->
                <!-- :src="require('@/assets/')" -->
              <div class="artist_msg">
                <p class="name">{{ item.name }}</p>
                <p class="nick_name">{{ item.phone }}</p>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getArtistAgent, getArtistStarScout } from "@/axios/artist";
import { mapGetters } from "vuex";
import Empty from "@/components/Empty";
let timer;
let text = "";
import { Toast } from "vant";
export default {
  components: {
    Empty,
  },
  computed: {
    ...mapGetters(["artist"]),
  },
  data() {
    return {
      list: [],
      form: {
        page: 1,
        name: "",
      },
      loading: false,
      finished: false,
      emptyShow: false,
      type: this.$route.query.type,
      types: [
        {
          name: "选择星探",
          api: getArtistStarScout,
          keys: ["star_scout", "star_scout_name"],
        },
        {
          name: "选择经纪人",
          api: getArtistAgent,
          keys: ["agent", "agent_name"],
        },
      ],
    };
  },
  methods: {
    getList() {
      this.emptyShow = false;
      if (this.finished) {
        this.list = [];
        this.finished = false;
      }
      this.types[this.type]
        .api(this.form)
        .then(({ list, count }) => {
          this.loading = false;
          this.list = [...this.list, ...list];
          this.finished = count == this.list.length;
          this.form.page += 1;
          if (this.list.length == 0) this.emptyShow = true;
        })
        .catch((err) => {
          this.loading = false;
           this.finished = true;
          Toast.fail("请求失败");
        });
    },
    search() {
      // 清空列表数据
      this.finished = true;
      this.form.page = 1;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.getList();
    },
    // 输入事件
    input(e) {
      text = e;
      if (timer) {
        clearTimeout(timer)
      };
      timer = setTimeout(this.search, 1000);
    },
    confirm({ id, name }) {
      let data = [id, name];
      this.types[this.type].keys.map((item, i) => {
        this.artist[item] = data[i];
      });
      this.$router.go(-1);
    },
  },
  mounted(){
    document.title = this.types[this.type].name
  }
};
</script>

<style scoped>
@import "../css/listItem.css";
.select_personnel {
  background-color: #f8f8fb;
  min-height: 100vh;
}
.top_serch{
  display: flex;
}
.top_serch .fanhui_box{
  display: flex;
  align-items: center;
  background-color: #fff;
}
.top_serch .fanhui_box img{
  width: 9px;
  height: 15px;
  margin: 0 6px 0 15px;
}
.top_serch .fanhui_box span{
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #8A929A;
}
.select_personnel .van-search__content {
  border-radius: 30px !important;
}
.select_personnel .van-search__content .van-cell {
  display: flex;
  align-items: center;
}
.search_box {
  flex: 1;
}
.search_box .van-cell {
  height: 34px;
}

.content_box {
  margin-top: 8px;
}
</style>